<template>
  <div class="play-page-disc" :class="{ playing: playing }">
    <div class="img">
      <div
        class="imgBox"
        :style="`background-image: url(${
          currentSong.song
            ? currentSong.picUrl
            : currentSong.al
            ? currentSong.al.picUrl
            : currentSong.artists[0].img1v1Url
        }?imageView=1&type=webp&thumbnail=247x0);`"
      ></div>
      <!-- <img :src="currentSong.picUrl || currentSong.al.picUrl | completeImageUrl" alt="" /> -->
    </div>
    <ul>
      <li @click.stop="iconShow = !iconShow">
        <span class="iconfont icon-xihuan" v-if="iconShow"></span>
        <span class="redIcon iconfont icon-xihuan2" v-else></span>
      </li>
      <li><span class="iconfont icon-xiazai"></span></li>
      <li><span class="iconfont icon-changge"></span></li>
      <li><span class="iconfont icon-pinglun"></span></li>
      <li><span class="iconfont icon-gengduo-shuxiang"></span></li>
    </ul>
  </div>
</template>

<script>
export default {
  props: ["currentSong", "playing"],
  data() {
    return {
      iconShow: true,
    };
  },
};
</script>

<style lang="less">
.play-page-disc {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  align-items: center;
  .img {
    animation: rotate 8s linear infinite;
    animation-play-state: paused;
    border-radius: 50%;
    position: relative;
    width: 247px;
    height: 247px;
    border-radius: 50%;
    margin-top: 70px;
    .imgBox {
      border-radius: 50%;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: red;
      background-position: center center;
      background-size: cover;
      z-index: 99;
    }
    &::after {
      content: "";
      display: block;
      width: 130%;
      height: 130%;

      background-color: #000;
      border-radius: 50%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    &::before {
      content: "";
      display: block;
      width: 135%;
      height: 135%;
      background-color: rgb(88, 88, 88);
      border-radius: 50%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
  ul {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    li {
      span {
        font-size: 26px;
        color: rgba(255, 251, 240, 0.7);
      }
      &:nth-child(1) {
        .redIcon {
          color: red;
        }
      }
    }
  }
  &.playing {
    .img {
      animation-play-state: running;
    }
  }
}
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>